<template>
  <view class="container">
    <!-- 顶部个人信息区 -->
    <view class="user-info-section">
      <view class="status-bar-placeholder"></view>
      
      <!-- <view class="header-actions">
        <view class="action-icon">
          <text class="iconfont icon-notification"></text>
        </view>
        <view class="action-icon">
          <text class="iconfont icon-settings"></text>
        </view>
      </view> -->
      
      <view class="user-profile">
        <view class="user-details">
          <text class="username">{{userInfo.userName}}</text>
          <!-- <view class="member-tag">
            <text class="tag-text">VIP会员</text>
          </view> -->
        </view>
        <!-- <view class="invite-code">
          <text class="code-label">邀请码：</text>
          <text class="code-value">HTRP78</text>
          <text class="copy-btn">复制</text>
        </view> -->
      </view>
    </view>
    
    <!-- 数据概览区 -->
    <view class="data-overview">
      <view class="overview-item">
        <text class="overview-value">{{userInfo.invited || 0}}</text>
        <text class="overview-label">已邀请人数</text>
      </view>
      <view class="separator"></view>
      <view class="overview-item">
        <text class="overview-value">{{userInfo.success ||0}}</text>
        <text class="overview-label">成功拼团数</text>
      </view>
      <view class="separator"></view>
      <view class="overview-item">
        <text class="overview-value">{{userInfo.integral || 0}}</text>
        <text class="overview-label">累计积分</text>
      </view>
    </view>
    
    <!-- 订单中心 -->
    <view class="module-card">
      <view class="module-header">
        <text class="module-title">我的拼团</text>
        <view class="view-all" @click="navigateToOrders">
          <text class="view-all-text">查看全部</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      
      <view class="order-actions">
        <!-- <view class="order-action-item">
          <view class="order-icon-wrapper">
            <text class="iconfont icon-wallet"></text>
            <text class="badge" v-if="true">2</text>
          </view>
          <text class="order-action-text">待付款</text>
        </view> -->
        <view class="order-action-item">
          <view class="order-icon-wrapper">
            <text class="iconfont icon-group"></text>
            <text class="badge" v-if="true">1</text>
          </view>
          <text class="order-action-text">待成团</text>
        </view>
        <view class="order-action-item">
          <view class="order-icon-wrapper">
            <text class="iconfont icon-process"></text>
          </view>
          <text class="order-action-text">处理中</text>
        </view>
        <view class="order-action-item">
          <view class="order-icon-wrapper">
            <text class="iconfont icon-completed"></text>
          </view>
          <text class="order-action-text">已完成</text>
        </view>
        <view class="order-action-item">
          <view class="order-icon-wrapper">
            <text class="iconfont icon-expired"></text>
          </view>
          <text class="order-action-text">已失效</text>
        </view>
      </view>
    </view>
    
    <!-- 拼团管理 -->
    <view class="module-card">
      <view class="module-header">
        <text class="module-title">我的拼团</text>
        <view class="view-all">
          <text class="view-all-text">查看全部</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      
      <view class="group-preview">
        <view class="group-item" v-for="(item,index) in userInfo.myGroupPurchase" :key="index">
          <view class="group-info">
            <text class="group-title">{{item.title}}</text>
            <text class="group-status processing">{{item.status == 1 ? '待成团' : '已成团'}}</text>
          </view>
          <text class="group-time">剩余: 2天12小时</text>
          <view class="group-progress">
            <view class="progress-bar">
              <view class="progress-fill" style="width: 60%;"></view>
            </view>
            <text class="progress-text">{{item.groupMemberDetailVOList.length}}人</text>
          </view>
        </view>
      </view>
      
      <view class="menu-items">
        <view class="menu-item">
          <text class="menu-text">进行中的拼团</text>
          <text class="menu-badge">1</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="menu-item">
          <text class="menu-text">已完成的拼团</text>
          <text class="menu-badge">4</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="menu-item">
          <text class="menu-text">待出签拼团</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 邀请奖励 -->
    <view class="invite-card compact">
      <view class="invite-content">
        <view class="invite-info">
          <text class="invite-title">邀请好友享优惠</text>
          <text class="invite-desc">成功邀请1人，立减10元</text>
        </view>
        <view class="invite-btn">
          <text class="invite-btn-text">立即邀请</text>
        </view>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <!-- <view class="function-list">
      <view class="function-item" v-for="(item, index) in functionList" :key="index">
        <view class="function-icon" :style="{ backgroundColor: item.iconBg }">
          <text class="iconfont" :class="item.icon"></text>
        </view>
        <text class="function-text">{{ item.text }}</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view> -->
    
    <!-- 底部安全区域 -->
    <view class="safe-area-bottom"></view>
    
    <!-- TabBar组件 -->
    <cc-myTabbar :tabBarShow="4"></cc-myTabbar>
  </view>
</template>

<script>
import { user } from "../../api/pt";
export default {
  data() {
    return {
      userInfo:{},
      functionList: [
        { text: '我的收藏', icon: 'icon-collection', iconBg: '#FFE1E1' },
        { text: '浏览历史', icon: 'icon-history', iconBg: '#E1F5FE' },
        { text: '消息通知', icon: 'icon-message', iconBg: '#E8F5E9' },
        { text: '客服咨询', icon: 'icon-customer-service', iconBg: '#FFF8E1' },
        { text: '帮助中心', icon: 'icon-help', iconBg: '#F3E5F5' },
        { text: '系统设置', icon: 'icon-settings', iconBg: '#E0F7FA' }
      ]
    };
  },
  onLoad() {
    user().then(res=>{
      console.log(res,'2222222222');
      this.userInfo = res.data
    })
    // 设置状态栏为透明
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#4A90E2',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    });
  },
  methods: {
    copyInviteCode() {
      uni.setClipboardData({
        data: 'HTRP78',
        success: () => {
          uni.showToast({
            title: '邀请码已复制',
            icon: 'none'
          });
        }
      });
    },
    navigateToOrders() {
      uni.navigateTo({
        url: '/pages/mine/orders'
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  background-color: #F7F7F7;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  height: 90vh;
  padding-bottom: 100rpx;
  overflow: hidden;
}

/* 顶部个人信息区 */
.user-info-section {
  background-image: linear-gradient(135deg, rgba(74, 144, 226, 0.9), rgba(53, 122, 189, 0.85));
  padding: 0 30rpx 30rpx;
  color: white;
  position: relative;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8rpx 20rpx rgba(53, 122, 189, 0.3);
}

.status-bar-placeholder {
  height: var(--status-bar-height);
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx 0;
}

.action-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.user-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.username {
  font-size: 36rpx;
  font-weight: 600;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.member-tag {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
  padding: 6rpx 20rpx;
}

.tag-text {
  font-size: 24rpx;
}

.invite-code {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 32rpx;
  padding: 8rpx 24rpx;
}

.code-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.code-value {
  font-size: 26rpx;
  font-weight: 500;
  margin: 0 10rpx;
}

.copy-btn {
  font-size: 24rpx;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

/* 数据概览区 */
.data-overview {
  margin: -20rpx 30rpx 20rpx;
  display: flex;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 20rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx 0;
  position: relative;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.overview-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overview-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 6rpx;
}

.overview-label {
  font-size: 24rpx;
  color: #999999;
}

.separator {
  width: 2rpx;
  background-color: #EEEEEE;
  margin: 10rpx 0;
}

/* 模块卡片样式 */
.module-card {
  margin: 0 30rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.module-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
}

.view-all {
  display: flex;
  align-items: center;
}

.view-all-text {
  font-size: 24rpx;
  color: #999999;
  margin-right: 6rpx;
}

/* 订单图标区 */
.order-actions {
  display: flex;
  justify-content: space-between;
}

.order-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-icon-wrapper {
  position: relative;
  width: 70rpx;
  height: 70rpx;
  background-color: rgba(245, 245, 245, 0.5);
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.badge {
  position: absolute;
  top: -6rpx;
  right: -6rpx;
  background-color: #FF6B6B;
  color: white;
  font-size: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6rpx;
}

.order-action-text {
  font-size: 24rpx;
  color: #666666;
}

/* 拼团预览 */
.group-preview {
  margin-bottom: 20rpx;
}

.group-item {
  background-color: rgba(248, 248, 248, 0.6);
  border-radius: 16rpx;
  padding: 20rpx;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.group-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.group-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
}

.group-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.processing {
  color: #4A90E2;
  background-color: rgba(74, 144, 226, 0.1);
}

.group-time {
  font-size: 24rpx;
  color: #FF6B6B;
  margin-bottom: 16rpx;
}

.group-progress {
  display: flex;
  align-items: center;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background-color: rgba(224, 224, 224, 0.5);
  border-radius: 6rpx;
  overflow: hidden;
  margin-right: 16rpx;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.progress-fill {
  height: 100%;
  background-image: linear-gradient(to right, #4A90E2, #6AB0FF);
  border-radius: 6rpx;
  transition: width 0.8s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #999999;
}

/* 菜单列表 */
.menu-items {
  border-top: 2rpx solid rgba(245, 245, 245, 0.8);
  padding-top: 20rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid rgba(245, 245, 245, 0.8);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  flex: 1;
  font-size: 26rpx;
  color: #333333;
}

.menu-badge {
  font-size: 24rpx;
  color: #999999;
  margin-right: 10rpx;
}

/* 邀请卡片 */
.invite-card {
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  background-image: linear-gradient(to right, rgba(255, 154, 158, 0.85), rgba(250, 208, 196, 0.85));
  padding: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 154, 158, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.invite-card.compact {
  padding: 16rpx 20rpx;
}

.invite-content {
  display: flex;
  align-items: center;
}

.invite-info {
  flex: 1;
}

.invite-title {
  font-size: 30rpx;
  font-weight: 600;
  color: white;
  margin-bottom: 6rpx;
}

.invite-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.invite-btn {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 30rpx;
  padding: 12rpx 28rpx;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.invite-btn-text {
  font-size: 26rpx;
  color: #FF9A9E;
  font-weight: 500;
}

/* 功能列表 */
.function-list {
  margin: 0 30rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #F5F5F5;
}

.function-item:last-child {
  border-bottom: none;
}

.function-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.function-text {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
}

/* 底部安全区 */
.safe-area-bottom {
  height: 50rpx;
  height: calc(100rpx + env(safe-area-inset-bottom));
}

/* Icon fonts */
@font-face {
  font-family: 'iconfont';
  src: url('data:font/woff2;charset=utf-8;base64,...') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 36rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-right:before {
  content: "\e743";
  font-size: 28rpx;
  color: #CCCCCC;
}

/* 临时定义的图标字体 - 实际使用需要替换成真实字体文件 */
.icon-notification:before { content: "\e7c5"; }
.icon-settings:before { content: "\e78e"; }
.icon-wallet:before { content: "\e7b1"; }
.icon-group:before { content: "\e7af"; }
.icon-process:before { content: "\e74e"; }
.icon-completed:before { content: "\e7cd"; }
.icon-expired:before { content: "\e747"; }
.icon-collection:before { content: "\e79d"; }
.icon-history:before { content: "\e749"; }
.icon-message:before { content: "\e78a"; }
.icon-customer-service:before { content: "\e749"; }
.icon-help:before { content: "\e752"; }

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

.module-card, .invite-card, .data-overview {
  animation: fadeIn 0.5s ease-out forwards;
}

.data-overview {
  animation-delay: 0.1s;
}

.module-card:nth-child(3) {
  animation-delay: 0.2s;
}

.module-card:nth-child(4) {
  animation-delay: 0.3s;
}

.invite-card {
  animation-delay: 0.4s;
}

.order-action-item:hover .order-icon-wrapper,
.invite-btn:hover {
  transform: translateY(-5rpx);
}

/* 悬停效果 */
.menu-item {
  position: relative;
  overflow: hidden;
}

.menu-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2rpx;
  background-color: #4A90E2;
  transition: width 0.3s ease;
}

.menu-item:hover::after {
  width: 100%;
}
</style>
